import { createVNode, render } from 'vue'

import XtxMessage from '@/components/library/xtx-message'

// 准备dom容器，用于按需渲染

const dom = document.createElement('div')
dom.setAttribute('class', 'xtx-message-container')
document.body.appendChild(dom)

// 定时器标识
let timer = null

export default ({ type, text }) => {
  // 实现：根据xtx-message.vue渲染消息提示
  // 1. 导入组件
  // 2. 根据组件创建虚拟节点
  const vnode = createVNode(XtxMessage, { type, text })
  // 3. 准备一个DOM容器
  // 4. 把虚拟节点渲染DOM容器中
  render(vnode, dom)
  // 5. 开启定时，移出DOM容器内容
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, dom)
  }, 3000)
}
